 $(function () {
     // 1.1 获取裁剪区域的 DOM 元素
     var img = $('#image')
     // 1.2 配置选项
     const options = {
         // 纵横比
         aspectRatio: 1,
         // 指定预览区域
         preview: '.img-preview'
     }

     // 1.3 创建裁剪区域
     img.cropper(options)


     //   2.
     $("#chooseImageBtn").on("click", function () {
         $("#chooseImageInp").click()

     })
     //  选择图片,渲染到指定区域
     $("#chooseImageInp").on('change', function (e) {

         var file = e.target.files[0]
         let url = URL.createObjectURL(file)

         img
             .cropper('destroy') // 销毁旧的裁剪区域
             .attr('src', url) // 重新设置图片路径
             .cropper(options) // 重新初始化裁剪区域
     })
     $("#uploadBtn").on("click", function () {
         // 需求4  
         var dataURL = img
             .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                 width: 100,
                 height: 100
             })
             .toDataURL('image/png') // 将 Canvas 画布上的内容，转化为 base64 格式的字符串

         //  console.log(toDataURL);
         axios({

             method: "POST",
             url: "/my/update/avatar",
             data: "avatar=" + encodeURIComponent(dataURL)
         }).then(({
             data: res
         }) => {
             if (res.status !== 0) {
                 return layui.layer.msg(res.message)

             }
             layui.layer.msg("恭喜您,更改用户头像成功!")
             window.parent.getUserInfo()
         })


     })

 })